import React from "react";
import { connect } from "dva";
// import ImgPlaceHold from "@components/ImgPlaceHold";
import { IMG_BASE, JUMP_URL } from "@constants";
import Details from "./detail.js";


import { px2rem, inIos, loadImgsFn,touchEventFn } from "@utils/tools";
import TWEEN from '@tweenjs/tween.js'
// import { Downloader, Parser, Player } from 'svga.lite'


import style from "./index.less";
var  SVGA =require('svgaplayerweb');

var innerHeight = 0;
window.swiperVideosReady = false;

window.videoArrForCyr = [];



var bodyWidth = document.body.clientWidth;
var bodyHeight = document.body.clientHeight;
if (bodyWidth > bodyHeight) {
  //如果横屏则转换
  bodyWidth = document.body.clientHeight;
  bodyHeight = document.body.clientWidth;
}

var writePaperTopVal = 1122;
var writePaperBottomVal = 0;
var writePaperVal = bodyHeight * (750 / bodyWidth) - writePaperTopVal;
if (writePaperVal >= 275) {
  writePaperVal = 275;
} else if (writePaperVal <= 70) {
  writePaperVal = 70;
}
writePaperVal = writePaperVal + writePaperBottomVal ;
console.log("writePaperVal", writePaperVal)

function hsp() {
  var gethsp = function (event) {
    var orientation = (window.innerWidth > window.innerHeight) ? "landscape" : "portrait";
    if (orientation === 'landscape') {
      //横屏
      window.showhp();
    } else {
      window.showsp();
    }
  }
  gethsp()
  window.addEventListener("resize", gethsp, false);
}


class App extends React.PureComponent {
  state = {
    printBtnClicked: false,
    playPrintAni: false,
    isImgLoaded: false,
    isHp: false,
    showCase:false,
    caseIndex:1,
  };
  playHeadAni = false;
  videoArr = [];
  targetVideo = null;



  componentDidMount() {
    // setTimeout(this.fullScreen.bind(this),3100)
    var _this = this;
    document.title = "汇丰银行";

    window.showhp = _this.showhp.bind(this);
    window.showsp = _this.showsp.bind(this);
    hsp();

    loadImgsFn([
      // `${IMG_BASE}headBg.png`,
      // `${IMG_BASE}dyj.png`,
      // `${IMG_BASE}dyj_float.png`,
      // `${IMG_BASE}btn.png`,
      // `${IMG_BASE}printBtn.png`,
      // `${IMG_BASE}printBtn2.png`,
      // `${IMG_BASE}longImg05.png`
    ], () => {
      _this.setState({
        isImgLoaded: true
      }, () => {
        // _this.initHeadAni();
      })
    })


  }


  showhp() {
    this.setState({
      isHp: true
    })
  }

  showsp() {
    this.setState({
      isHp: false
    })
  }

  gotoPage(index){
    this.setState({
      showCase:true,caseIndex:index 
    })
  }

  goBack(){
    this.setState({
      showCase:false,caseIndex:1
    })
  }

  render = () => {
    const { banners } = this.props.homePage;
    const { playHeadAni, playPrintAni, isImgLoaded, isHp,printBtnClicked,showCase,caseIndex } = this.state;

    console.log(IMG_BASE, "IMG_BASEIMG_BASE");
    console.log(isHp, "isHp");

    var _this = this;
    var ios = inIos();

    innerHeight = window.innerHeight;


    return (
      <div className="conBox2021Q1_1" style={{ width: "100%", height: "100%", overflowY:printBtnClicked?"auto": "hidden", overflowX: "hidden", opacity: isImgLoaded ? "1" : "0" }} id="conBox">
        {isHp && <div style={{
          width: "100%", height: "100%", textAlign: "center", paddingTop: "20%", fontSize: px2rem(30), background: "#000", color: "#fff",
          position: "absolute", zIndex: "999999", left: "0px", top: "0px"
        }}>
          竖屏体验，效果更佳哦~
      </div>}
        {isImgLoaded && [
        <div className="con" key={"con"} style={{transform:showCase?"translate(-100%, 0px)":"translate(0%, 0px)"}}>


          <div className="list_page">
            <div className="page_title">汇丰中国手机银行快捷指南</div>
              <div className="list_banner">
                <img src={`${IMG_BASE}banner_01.png`}  alt="" />
              </div>
              <div className="list_items">
                  <div className="list_item" onClick={this.gotoPage.bind(this,1)}>
                      <div className="list_left_box">
                          <img src={`${IMG_BASE}list_icon_1.png`}  alt="" />
                      </div>
                      <div className="list_right_box">
                          <div className="list_title">注册与登录</div>
                          <div className="list_item_con">注册手机银行</div>
                          <div className="list_item_con">绑定微信银行</div>
                          <div className="list_item_con">人脸/指纹登录</div>
                          <img src={`${IMG_BASE}rihgt_btn.png`} className="rbtn" alt="" />
                      </div>
                  </div>
                  <div className="list_item" onClick={this.gotoPage.bind(this,2)}>
                      <div className="list_left_box">
                          <img src={`${IMG_BASE}list_icon_2.png`}  alt="" />
                      </div>
                      <div className="list_right_box">
                          <div className="list_title">转账与查询</div>
                          <div className="list_item_con">设定转账限额</div>
                          <div className="list_item_con">人民币转账</div>
                          <div className="list_item_con">环球账户与转账</div>
                          <div className="list_item_con">余额及交易明细查询</div>
                          <img src={`${IMG_BASE}rihgt_btn.png`} className="rbtn" alt="" />
                      </div>
                  </div>
                  <div className="list_item" onClick={this.gotoPage.bind(this,3)}>
                      <div className="list_left_box">
                          <img src={`${IMG_BASE}list_icon_3.png`}  alt="" />
                      </div>
                      <div className="list_right_box">
                          <div className="list_title">投资与定存</div>
                          <div className="list_item_con">投资理财</div>
                          <div className="list_item_con">外汇服务</div>
                          <div className="list_item_con">开立定存</div>
                          <img src={`${IMG_BASE}rihgt_btn.png`} className="rbtn" alt="" />
                      </div>
                  </div>
                  <div className="list_item noAfter" onClick={this.gotoPage.bind(this,4)}>
                      <div className="list_left_box">
                          <img src={`${IMG_BASE}list_icon_4.png`}  alt="" />
                      </div>
                      <div className="list_right_box">
                          <div className="list_title">服务与支持</div>
                          <div className="list_item_con">积分换好礼</div>
                          <div className="list_item_con">更新手机号码</div>
                          <div className="list_item_con">智能客服“小丰”</div>
                          <div className="list_item_con">在线激活睡眠/静止账户</div>
                          <div className="list_item_con">联系我们预约服务</div>
                          <img src={`${IMG_BASE}rihgt_btn.png`} className="rbtn" alt="" />
                      </div>
                  </div>
              </div>
          </div> 

          <div className="detailsBox">
          {caseIndex==1&&<Details caseIndex={1} goback={this.goBack.bind(this)}></Details>}
          {caseIndex==2&&<Details caseIndex={2} goback={this.goBack.bind(this)}></Details>}

          {caseIndex==3&&<Details caseIndex={3} goback={this.goBack.bind(this)}></Details>}
          {caseIndex==4&&<Details caseIndex={4} goback={this.goBack.bind(this)}></Details>}
          </div>
          
          

        </div>
      ]}
      </div>
    );
  };
}

export default connect(({ system, homePage }) => ({
  system: system.toJS(),
  homePage: homePage.toJS(),
}))(App);
